@charset utf-8;

*{text-align: left}
tr{vertical-align: text-top;}
#tb{background: DarkGray;width: 100%;height: 708px;padding: 0px}
#td1{height: 10%;background: green}
#td2{height: 80%;width: 20%; background: Aquamarine;}
#td3{height: 80%;width: 80%}
#td4{height: 10%;background: blue}
nav{width: 100%;height: 40px;background: #E0FFFF;text-align: center;padding: 6px;}
li{display: inline;}
a{text-decoration: none;}  /* 下划线去掉 */
button{background: yellowgreen; padding: 8px; border-radius: 8px;}
button:hover{background: green; padding: 8px; border-radius: 8px;} /*鼠标经过时*/
input{padding: 8px; background: #f8f8f8}
input:focus{padding: 8px; background: #ffc0cb} /*获取焦点时*/
#section1{width: 400px; background: beige; padding: 10px; margin-left: 150px; margin-top: 150px}
h1{
	text-shadow: #a9a9a9 5px 5px 3px, 5px 5px 5px rgba(255,0,0,0.2); /*阴影    水平，竖向偏移，模糊度 颜色*/
	text-align: center;color: blue;
}
#div1{background: yellowgreen; width: 50% ; color: red ; border: 2px blue solid}
p{border: 1px red solid}
#test_p{color: yellowgreen}
.class1{color: blue}
h3.class1{color: green}
input[value]{background: green}
input[value][style]{background: green}
input[value][style="1"]{background: blue}   /*style ~= "1" 其中一个相等*/
ul li{color: red}    /*ul下面的所有li*/
ul > li{color: blue}  /*只有ul下面的li*/
h2+p{color: red}   /*h2标签后面的p*/
p::first-letter{font-size: 50px}
p::first-line{color:green;}
a::before{
	content: "点击"
}
a::after{
	content: url(ifeng.jpg);
}
p::selection{color: red; background: green}  /*选择时颜色*/
#p1{font-size: 50px}  /* 像素*/
#p2{font-size: 200%}  /* 百分比*/
#p3{font-size: 1.5em}   /* 倍数*/
#p4{font-variant: small-caps;}  /*小型大写字母*/
#p5{font-style: italic;}      /*倾斜字体*/
#p6{font-weight: bold;}     /*粗体*/
#p7{font-family: 楷体,隶书}  /* 当前一个不存在的时候就显示后面的字体*/
#p8{font: bold italic small-caps 60px 楷体}   /*按照指定顺序显示  至少需要大小和字体*/
@font-face{
	font-family: "abc";
	src: url("xxx.ttf"); /*自定义字体*/
}
#p9{font-family: abc}   /*www.youziku.com   从这里下载新的字体*/
#p11{
	color: yellowgreen; text-align: justify;/*justify 两边对齐*/
	width: 50%; line-height: 2em;
	text-indent: 2em;  /*首行缩进*/
	letter-spacing: 0.5em;   /* 字间距 */
}  
#p12{
	text-transform: uppercase;	/*大写*/
	text-transform: lowercase;   /*小写*/
	text-transform: capitalize;  /*首字母大写*/
	margin: 50px;
}
#p13{
	font-size: 50px;
	text-stroke: 1px red;
	text-fill-color: green;
	-webkit-text-stroke: 2px red;		/*-webkit- Chrome支持、苹果*/
	-webkit-text-fill-color: green;		
	-ms-text-stroke: 1px red;			/*-ms- IE 浏览器*/
	-ms-text-fill-color: green;
	/*padding-top: 10px;
	padding-left: 30px;
	padding-right: 40px;
	padding-bottom: 10px;*/
	padding: 10px 20px 30px 40px;
	border: 3px solid blue;
	margin: 10px;
	overflow-y: auto;
}
div{
	padding: 0px;
	margin: 0px;
	width: 300px;
	height: 100px; 
}
#div4{
	background: rgba(255,0,0,0.5);
	/*position: relative; */  /*相对定位*/
	position: absolute;  /*绝对定位*/
	left: 150px;
}
#div5{
	background: rgba(0,255,0,0.5);
	/*position: relative;*/
	position: absolute;
	left: 300px;
	top: 50px;
}
#div6{
	background: rgba(0,0,255,0.5);
	/*position: relative;*/
	position: fixed;   /*浏览器绝对定位*/
	left: 450px;
	top: 100px;
}
#img1{
	position: absolute;
	clip: rect(210px, 265px, 310px, 170px);
}